<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
    <script>
        window.onload = function () {
            //需求 点击div  两秒后 改变颜色
            let ad = document.getElementById("ad");
            // ad.addEventListener("click", function () {
            //     //保存this
            //     let that = this;
            //     //定时器
            //     setTimeout(function () {
            //         that.style.background = 'pink';
            //     }, 2000)
            // });
            // ad.addEventListener("click", function () {
            //     //定时器
            //     setTimeout( ()=>{
            //         this.style.background = 'pink';
            //     }, 2000)
            // });

            //需求 从数组中返回偶函数的元素
            const arr = [2, 6, 9, 10, 100];
            // const re=arr.filter(function(itme){
            //     if(itme%2===0){
            //         return true;
            //     }
            //     else{
            //         return false;
            //     }
            // });

            // const re = arr.filter(item => item % 2 === 0)
            // console.log(re);
            //箭头函数适合与 this 无关的回调，定时器，数组的方法回调
            //箭头函数不适合与 this 有关的回调， 事件回调，对象的方法
        }
    </script>
</head>

<body>
    <div id="ad"></div>

</body>

</html>